<template>
	<view class="my-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar">
				<text class="avatar-icon">👤</text>
			</view>
			<view class="user-info">
				<text v-if="userName" class="user-name">{{ userName }}</text>
				<text v-else class="user-name">未登录</text>
				<text class="user-tip">{{ userName ? '欢迎回来' : '点击登录' }}</text>
			</view>
			<view class="user-action">
				<button v-if="!userName" class="login-btn" @click="goToLogin" size="mini">登录</button>
				<button v-else class="logout-btn" @click="onLogout" size="mini">退出</button>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="goToOrderList">
				<view class="menu-icon-wrapper">
					<text class="menu-icon">📋</text>
				</view>
				<text class="menu-text">我的订单</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<view class="menu-item" @click="showComingSoon">
				<view class="menu-icon-wrapper">
					<text class="menu-icon">❤️</text>
				</view>
				<text class="menu-text">我的收藏</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<view class="menu-item" @click="showComingSoon">
				<view class="menu-icon-wrapper">
					<text class="menu-icon">💰</text>
				</view>
				<text class="menu-text">我的余额</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<view class="menu-item" @click="showComingSoon">
				<view class="menu-icon-wrapper">
					<text class="menu-icon">🎫</text>
				</view>
				<text class="menu-text">优惠券</text>
				<text class="menu-arrow">›</text>
			</view>
		</view>
		
		<!-- 其他功能 -->
		<view class="menu-section">
			<view class="menu-item" @click="showComingSoon">
				<view class="menu-icon-wrapper">
					<text class="menu-icon">⚙️</text>
				</view>
				<text class="menu-text">设置</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<view class="menu-item" @click="showComingSoon">
				<view class="menu-icon-wrapper">
					<text class="menu-icon">📞</text>
				</view>
				<text class="menu-text">联系客服</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<view class="menu-item" @click="showComingSoon">
				<view class="menu-icon-wrapper">
					<text class="menu-icon">ℹ️</text>
				</view>
				<text class="menu-text">关于我们</text>
				<text class="menu-arrow">›</text>
			</view>
		</view>
	</view>
</template>

<script>
	let tag = "my-page";
	export default {
		data() {
			return {
				userName: ""
			}
		},
		
		onShow() {
			// 每次显示页面时更新用户名
			this.userName = this.$loginManager.getUserName();
			this.$log.info(tag, `当前用户: ${this.userName}`);
		},
		
		methods: {
			// 跳转到登录页
			goToLogin() {
				this.$log.info(tag, "跳转到登录页");
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			
			// 退出登录
			onLogout() {
				this.$log.info(tag, "退出登录");
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.$loginManager.logout();
							this.userName = "";
							uni.showToast({
								icon: 'success',
								title: '已退出登录',
								duration: 1500
							});
						}
					}
				});
			},
			
			// 跳转到订单列表
			goToOrderList() {
				this.$log.info(tag, "跳转到订单列表");
				if (this.$loginManager.isLoggedIn()) {
					uni.switchTab({
						url: '/pages/order-list/order-list'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 1500
					});
					setTimeout(() => {
						this.goToLogin();
					}, 1500);
				}
			},
			
			// 功能开发中提示
			showComingSoon() {
				uni.showToast({
					icon: 'none',
					title: '功能开发中...',
					duration: 1500
				});
			}
		}
	}
</script>

<style scoped>
	.my-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%);
		padding-bottom: 20rpx;
	}
	
	/* 用户信息卡片 */
	.user-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		margin: 20rpx;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
	}
	
	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
	}
	
	.avatar-icon {
		font-size: 60rpx;
	}
	
	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.user-name {
		font-size: 36rpx;
		color: #fff;
		font-weight: 600;
		margin-bottom: 8rpx;
	}
	
	.user-tip {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.user-action {
		margin-left: 20rpx;
	}
	
	.login-btn, .logout-btn {
		background: rgba(255, 255, 255, 0.2) !important;
		color: #fff !important;
		border: 1px solid rgba(255, 255, 255, 0.3) !important;
		border-radius: 20rpx !important;
		padding: 12rpx 32rpx !important;
		font-size: 26rpx !important;
		line-height: 1.5;
	}
	
	/* 菜单区域 */
	.menu-section {
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		border-bottom: 1rpx solid #f5f7fa;
		transition: background 0.3s;
	}
	
	.menu-item:last-child {
		border-bottom: none;
	}
	
	.menu-item:active {
		background: #f5f7fa;
	}
	
	.menu-icon-wrapper {
		width: 72rpx;
		height: 72rpx;
		background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
	}
	
	.menu-icon {
		font-size: 40rpx;
	}
	
	.menu-text {
		flex: 1;
		font-size: 30rpx;
		color: #2d3748;
	}
	
	.menu-arrow {
		font-size: 48rpx;
		color: #cbd5e0;
		font-weight: 300;
	}
</style>
